<template>
  <div>
    <n-grid :x-gap="12" :y-gap="8" :cols="4">
      <n-gi :span="1">
        <n-space style="margin-bottom: 10px">
          <n-button type="primary" @click="editTask({})"> 新增 </n-button>
          <n-button
            ghost
            :type="checkedRowKeysRef.length === 0 ? undefined : 'warning'"
            :disabled="checkedRowKeysRef.length === 0"
            @click="deleteTask()"
          >
           批量删除
          </n-button>
        </n-space>
      </n-gi>
      <n-gi :span="3">
        <n-space justify="end">
          <n-input v-model:value="queryParams.keyword" style="width: 150px" clearable placeholder="key/value" />
          <n-button type="primary" @click="getTaskList"> 查询 </n-button>
          <n-button @click="reset"> 重置 </n-button>
        </n-space>
      </n-gi>
    </n-grid>
    <n-data-table
      :loading="spinning"
      :columns="columns"
      :data="tableData.list"
      :pagination="pagination"
      :remote="true"
      :row-key="() => ++rowkey"
      :bordered="false"
      size="small"
      :scroll-x="1360"
      @update:checked-row-keys="handleCheck"
      @update:page="pageChange"
    />
    <form-modal ref="formModal" v-if="showEditorModal" v-model:showModal="showEditorModal" :editor-data="model" @refresh="getTaskList" />
  </div>
</template>
<script lang="ts" setup>
  import { udpAppStore } from 'udp/store/app-store'
  import FormModal from './formModal.vue'
  import { Row } from './home'
  import { getList, deleteItem } from './api'
  import { Operate, createColumns } from './index'

  // 弹框相关
  const dialog = useDialog()
  const message = useMessage()
  const formModal = ref()
  const showEditorModal = ref(false)
  const model = ref({ })
  const rowkey = new Date().getTime()
  // table相关
  const tableData = reactive({
    list: []
  })
  const spinning = ref(false)
  const pagination = reactive({
    pageSize: 10,
    itemCount: 0,
    page: 1
  })
  const checkedRowKeysRef = ref([])
  const handleCheck = (rowKeys: never[]) => {
    checkedRowKeysRef.value = rowKeys
  }
  // table高度
  const appStore = udpAppStore()
  const contentHeight = computed(() => appStore.contentHeight.replace(')', ' - 90px )'))

  // 查询相关
  const queryParams = reactive({
    keyword: ''
  })
  // 请求数据
  const queryTableData = () => {
    spinning.value = true
    getList({
      ...queryParams,
      pageSize: pagination.pageSize,
      pageNo: pagination.page
    })
      .then((res: any) => {
        tableData.list = res.data.list
        pagination.itemCount = res.data.total
      })
      .finally(() => {
        spinning.value = false
      })
  }
  // 获取数据
  const getTaskList = () => {
    pagination.page = 1
    queryTableData()
  }
  // 切换分页
  const pageChange = (page: number) => {
    pagination.page = page
    queryTableData()
  }
  // 重置
  const reset = () => {
    queryParams.keyword = ''
    getTaskList()
  }
  // 编辑
  const editTask = (row: Row) => {
    model.value = row
    showEditorModal.value = true
  }
  // 删除相关
  const deleteTask = (row?: Row) => {
    dialog.warning({
      title: '删除',
      content: () => '确定删除',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        deleteItem(row).then((res: any) => {
          if (res.code == 0) {
            message.success(`删除成功`)
            getTaskList()
          } else {
            message.error(`删除失败`)
          }
        })
      }
    })
  }

  // 操作
  const options: Operate[] = [
    {
      name: '编辑',
      i18nkey: 'f_title_edit',
      method: (row: Row) => editTask(row)
    },
    {
      name: '删除',
      type: 'error',
      i18nkey: 'f_title_delete',
      method: (row: Row) => deleteTask(row)
    }
  ]

  getTaskList()
  const columns = createColumns(options)
</script>
<style lang="less" scoped></style>
